<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" size="small" @click="addModalDialog = true">
        添加
      </el-button>
    </div>
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>

      <el-table-column label="用户名" align="center">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>

      <el-table-column label="昵称"  align="center">
        <template slot-scope="scope">
          {{ scope.row.nick_name }}
        </template>
      </el-table-column>

      <el-table-column label="角色" align="center">
        <template slot-scope="scope">

         <el-tag  type="info" effect="plain"    v-for="role in scope.row.roles"  style="margin-right: 5px;">
          {{ role.title }}
         </el-tag>

        </template>
      </el-table-column >

      <el-table-column label="超级管理员" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_super == true" type="success" effect="plain">
              {{ scope.row.is_super }}
          </el-tag>
          <el-tag v-else type="info" effect="plain">
              {{ scope.row.is_super }}
          </el-tag>

        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state == true" type="success" effect="plain">
              {{ scope.row.state }}
          </el-tag>
          <el-tag v-else type="info" effect="plain">
              {{ scope.row.state }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column  align="center" label="Action" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editClick(scope.row.id,scope.$index)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.row.id,scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--模态框-->
    <el-dialog title="添加" width="35%" :visible.sync="addModalDialog">
      <el-form ref="form" :model="form" label-width="15%">
        <el-form-item label="用户名">
          <el-input v-model="form.username" style="width:90%"></el-input>
        </el-form-item>

        <el-form-item label="昵称">
          <el-input v-model="form.nick_name" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="form.password" style="width:90%"></el-input>
        </el-form-item>


        <el-form-item label="角色" label-width="15%">
          <el-select v-model="form.roles" placeholder="选择角色" multiple  style="width:90%">
            <el-option v-for="item in role_list" :key="item.id"  :label="item.title" :value="item.id" ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" label-width="15%">
          <el-select v-model="form.state" placeholder="是否启用"  style="width:90%">
            <el-option v-for="item in state_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否超管" label-width="15%">
          <el-select v-model="form.is_super" placeholder="是否超管"  style="width:90%">
            <el-option v-for="item in is_super_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addModalDialog = false">取 消</el-button>
        <el-button type="primary"  @click="createUser">提交</el-button>
      </div>
    </el-dialog>

    <!--模态框-->
    <el-dialog title="修改" width="35%" :visible.sync="editModalDialog">
      <el-form ref="form" :model="edit_form" label-width="15%">
        <el-form-item label="用户名">
          <el-input v-model="edit_form.username" style="width:90%"></el-input>
        </el-form-item>

        <el-form-item label="昵称">
          <el-input v-model="edit_form.nick_name" style="width:90%"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="edit_form.password" style="width:90%"></el-input>
        </el-form-item>


        <el-form-item label="角色" label-width="15%">
          <el-select v-model="edit_ids" placeholder="选择角色" multiple  style="width:90%">
            <el-option v-for="item in role_list" :key="item.id"  :label="item.title" :value="item.id" ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" label-width="15%">
          <el-select v-model="edit_form.state" placeholder="是否启用"  style="width:90%">
            <el-option v-for="item in state_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否超管" label-width="15%">
          <el-select v-model="edit_form.is_super" placeholder="是否超管"  style="width:90%">
            <el-option v-for="item in is_super_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editModalDialog = false">取 消</el-button>
        <el-button type="primary"  @click="updateUser">提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>

  import request from '@/utils/request'
  let baseUrl = process.env.VUE_APP_BASE_URL

  export default {
    //定义数据
    data() {
      return {
        list: null,
        role_list: null,
        addModalDialog : false,
        editModalDialog : false,
        edit_id:null,
        edit_index:null,
        edit_ids:[],
        state_options:[
          {value:true,label:'启用'},{value: false,label:'禁用'}
        ],
        is_super_options:[
          {value: false,label:'否'},{value:true,label:'是'}
        ],
        form: {
          username: '',
          nick_name: '',
          password:'',
          state:true,
          is_super:false,
          roles:[],
        },
        edit_form: {
          username: '',
          nick_name: '',
          password:'',
          state:true,
          is_super:false,
          roles:[],
        }
      }
    },
    created() {
      //页面加载后执行函数
      this.getUsers()
      this.getRoles()
    },
    methods: {
      //请求数据
      getUsers() {
        //获取角色列表
        request({
          url:baseUrl+'/users/',
          method:'get'
        }).then(ret => {
          this.list = ret.data
        })
      },

      //请求数据
      getRoles() {
        //获取角色列表
        request({
            url:baseUrl+'/roles/',
            method:'get'
          }).then(ret => {
          this.role_list = ret.data
        })
      },
      //添加
      createUser(){
        this.addModalDialog=false,
          request({
            url:baseUrl+'/users/',
            method:'post',
            data:this.form
          }

        ).then(ret => {
          //添加成功后加入到数组中展示
          this.list.splice(this.list.length,0,ret.data)
          this.$notify({
            title: 'SUCCESS',
            message: '添加成功',
            type: 'success'
          })
          //添加后初始化form值
          this.form =  {
            username: '',
              nick_name: '',
              password:'',
              state:'true',
              is_super:'false',
              roles:[],
          }
        }).catch(err => {
          this.$notify.error({
            title: 'ERROR',
            message: err,
          })
        })
      },
      //删除
      deleteUser(id,index){
        //删除后移除数组中数据
        this.list.splice(index,1)
        request({
          url:baseUrl+'/users/'+id+'/',
          method:'delete'
        }).then(ret => {
          this.$notify({
            title: 'SUCCESS',
            message: '已删除',
            type: 'success'
          })

        }).catch(err => {
          this.$notify.error({
            title: 'ERROR',
            message: err,
          })
        })
      },
      //修改
      updateUser(){
        var edit_role_list = []
        let i=0
        let j=0
        for(i=0;i<this.edit_ids.length;i++){

           for (j=0;j<this.role_list.length;j++){
              if (this.edit_ids[i] == this.role_list[j].id){
                edit_role_list.push(this.role_list[j])
              }

           }
        }

        this.edit_form.roles = edit_role_list
        request({
          url:baseUrl+'/users/'+this.edit_id+'/',
          method:'put',
          data:this.edit_form
        }).then(ret => {
          //更新后同步数组中数据
          this.$notify({
            title: 'SUCCESS',
            message: '已修改',
            type: 'success'
          })

          this.list.splice(this.edit_index,1,ret.data)
          this.editModalDialog =false

        }).catch(err => {
          this.$notify.error({
            title: 'ERROR',
            message: err,
          })
        })
      },
      //点击编辑显示编辑对话框
      editClick(id,index){
        this.edit_ids = []
        this.editModalDialog =true
        this.edit_form = this.list[index]
        let i =0
        for(i=0;i<this.edit_form.roles.length;i++){
          var role_id = this.edit_form.roles[i].id
          this.edit_ids.push(role_id)
        }
        this.edit_id = id
        this.edit_index = index

      }
    }
  }
</script>
<style>
  .filter-container {
    padding-bottom: 10px;
  }
</style>

